<template>
  <div class="register">
    <div class="register-title">
      <span>开口说英语</span>
    </div>
    <div class="register-content">
      <el-card class="register-content-card">
        <div class="register-content-head">
          <el-image>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
        <div class="register-content-left">
          <div class="register-content-left-title">说英语 | 专业互联网教育</div>

          <el-form ref="registerForm" :rules="rules" :model="registerForm" label-width="80px" class="register-content-left-form">
            <el-form-item prop="phone">
              <div class="register-content-left-form-div1">
                <select id="" name="">
                  <option value="volvo">0001</option>
                  <option value="saab">86</option>
                  <option value="opel">76</option>
                  <option value="audi">65</option>
                </select>
                <input v-model="registerForm.phone" type="text" placeholder="请输入手机号"></div></el-form-item>
            <el-form-item prop="check">
              <div class="register-content-left-form-div2">
                <input v-model="registerForm.check" type="text" placeholder="验证码">
                <button class="register-content-left-form-button1">获取验证码</button>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <input v-model="registerForm.password" type="password" placeholder="请输入密码">
            </el-form-item>
            <el-form-item prop="checkPass">
              <input v-model="registerForm.checkPass" type="password" placeholder="请再次输入密码">
            </el-form-item>
            <el-form-item prop="handleRadio">
              <div class="register-content-left-form-div3">
                <input v-model="registerForm.handleRadio" type="checkbox">
                <span>我已经阅读[用户协议]</span>

              </div>

            </el-form-item>
            <el-form-item>
              <button class="register-content-left-form-button2" @click.prevent="handleButton(registerForm)">注&nbsp; &nbsp;册</button>
            </el-form-item>
          </el-form>
        </div>
        <div class="register-content-center" />

        <div class="register-content-right">
          <div class="register-content-right-head">
            <div>已经有账号：</div>
            <div><span><router-link to="./login">马上登入<span class="el-icon-right" /></router-link></span>
            </div>
          </div>
          <div class="register-content-right-content">
            <div class="register-content-right-content-div1">使用以下账号直接登入</div>
            <div class="register-content-right-content-div2">
              <el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image><el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image><el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <el-image>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </div>

        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      const value1 = value.trim()
      this.registerForm.password = value1
      if (value1 === '') {
        callback(new Error('请输入密码'))
      }
      // console.log(/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/.test(value1))
      if (!(/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/.test(value1))) {
        callback(new Error('请输入输入5-20个以字母开头、可带数字、“_”、“.”的密码'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        phone: '',
        check: '',
        password: '',
        checkPass: '',
        handleRadio: false
      },

      rules: {
        phone: [{ required: true, message: '请输入手机号或者邮箱', trigger: 'blur' }],
        check: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {

    // 发送请求
    handleButton() {
      this.$refs.registerForm.validate(async(valid) => {
        if (valid) {
          if (this.registerForm.handleRadio) {
            const result = await this.$API.user.getRegister({ username: this.registerForm.phone, password: this.registerForm.password })
            if (result.code === 200) {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              this.$router.push('/login')
            }
          } else {
            this.$message({
              message: '请勾选用户协议',
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: '输入错误',
            type: 'warning'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register{
  width: 100%;
  height: 35%;
  background-color: rgb(144,185,210);
  opacity:0.7;
  position: relative;
    .register-title{
      position: absolute;
      top: 40%;
      left: 20%;
      font-size: 20px;
    }
    .register-content{
      position: absolute;
      top: 60%;
      left: 25%;
      width: 50%;
        .register-content-card{
          padding-top:5px;
          padding-left: 5px;
        }
        .register-content-head{
          width: 60px;
          height: 60px;
          background-color: rgb(217,217,217);
          // border:100px solid;
          //  border-color:transparent transparent rgb(217,217,217) transparent;
        }
        .register-content-left{
          margin-left:-3%;
          width: 60%;
          .register-content-left-title{
            font-size: 20px;
            margin: 15px 15%;
            padding-bottom:5px;
            width: 80%;
            text-align: center;
            }
          .register-content-left-form{
            width: 90%;
            .register-content-left-form-div1{
                display: flex;
            }
            .register-content-left-form-div2{
                display: flex;
            }
            .register-content-left-form-div3{
                width: 100%;
                display:flex;
                font-size: 12px;
                margin: -4% 0 -6% 0;
                color: rgb(110,110,110);
                justify-content: flex-start;
                align-items: center;
                input{
                  margin-top:0;
                  padding-top:-2px;
                  width: 30px;
                  height:12px;
                }
            }
            select{
                outline: none;
                border: none;
                background-color: #fff;
                border-bottom: 1px solid  rgb(200,200,200);
                font-size: 12px;
                // padding-right:15px;
                text-align:center;
            }
            input{
              margin-top:10px;
              outline: none;
              border: none;
              border-bottom: 1px solid  rgb(200,200,200);
              width: 100%;
              height: 30%;
              padding: 0 5px 8px 0;
              }
            .register-content-left-form-button1{
                border: none;
                background-color: #fff;
                font-size: 13px;
                width: 65%;
                border-bottom: 1px solid  rgb(200,200,200);
            }
            .register-content-left-form-button2{
              margin:4% 0 40px 0;
              width: 100%;
              height: 40px;
              background-color: rgb(178,206,224);
              border: none;
              color: rgb(150,150,150);
              border-radius: 10px;

            }
          }
        }
          .register-content-center{
            position: absolute;
            left:60%;
            top: 8%;
            width: 1px;
            height: 86%;
            border: 1px dashed rgb(199,199,200);
        }
        .register-content-right{
          position: absolute;
          right: 0;
          width: 35%;
          top: 25%;
            .register-content-right-head{
              div{
                margin: 10px 10px;
              }
              span{
                font-size: 17px;
              }
            }
            .register-content-right-content{
              margin-top:25%;
              margin-left: 10px;
                .register-content-right-content-div2{
                  margin:10px 0px ;
                    .el-image{
                      width: 25px;
                      height: 20px;
                    }
                }
            }
        }

    }
}
</style>
